<a-layout-sider width="200" style="background: #fff">
  <a-menu :selected-keys="selectedKeys" :open-keys="openKeys" style="width: 200px;" mode="inline" :items="menus"
    @click="menuClickHandle"></a-menu>
</a-layout-sider>
<script>
  function useMenu() {
    const openKeys = ref([]);
    const selectedKeys = ref([window.location.pathname]);
    function getItem(label, key, icon, children, type) {
      return {
        key,
        icon,
        children,
        label,
        type,
      };
    }
    const menus = reactive([
      getItem('电视剧管理', 'tv', null, [
        getItem('添加电视剧', '/admin/tv/add'),
        getItem('电视剧列表', '/admin/tv/list'),
        getItem('电视剧分类', '/admin/tv/classify'),
      ]),
      getItem('电影管理', 'movie', null, [
        getItem('添加电影', '/admin/movie/add'),
        getItem('电影列表', '/admin/movie/list'),
        getItem('电影分类', '/admin/movie/classify'),
      ]),
      getItem('其他设置', 'other', null, [
        getItem('App设置', '/admin/app/setting'),
      ]),
    ]);
    const menuClickHandle = params => {
      window.location.href = `${params.key}?menu_open=${params.keyPath[0]}`;
    }
    onMounted(() => {
      let params =  Qs.parse(window.location.href.split("?")[1]);;
      let open_key = params?.menu_open ?? 'tv';
      openKeys.value = [open_key];
    })
    return {
      selectedKeys,
      openKeys,
      menus,
      menuClickHandle
    }
  }
</script>